<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">
    <meta name="renderer" content="webkit" />
    <meta name="force-rendering" content="webkit" />
    <title>首页</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@nutui/nutui@2.2.13/dist/nutui.min.css">
    <link rel="stylesheet" type="text/css" href="css/common.css" />
    <link rel="stylesheet" type="text/css" href="css/index.css" />
    <link rel="stylesheet" type="text/css" href="css/popup.css" />
    <link rel="stylesheet" href="css/swiper/swiper-bundle.css">
    <link rel="stylesheet" href="//at.alicdn.com/t/font_2353733_71ibui9xvrb.css">
    <script src="js/config.js"></script>
    <script src="js/jquery-1.8.1.min.js"></script>
    <script src="js/axios.min.js"></script>
    <script src="js/axios-config.js?v=4"></script>
    <script src="js/vue/vue.js"></script>
    <script src="js/component.js?v=2"></script>
    <script src="js/swiper/swiper-bundle.js?v=1"></script>
    <script src="http://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@nutui/nutui@2.2.13/dist/nutui.min.js"></script>
</head>

<body>
    <div id="app" v-cloak>
        <div class="topss">
            <div class="topssbox">
                <img src="img/index/s.png" />
                <input type="text" placeholder="搜索你感兴趣的课程" class="ss-input" v-on:focus="goSearch" />
            </div>
        </div>
        <div class="content">
            <div class="typeNav">
                <ul class="typeNav_tabbar d-f a-c-c j-c-c">
                    <li v-bind:class="type == 1? 'flex1 on':'flex1'" @click="switchType(1)">
                        热门
                        <span class="line"></span>
                    </li>
                    <li v-bind:class="type == 2? 'flex1 on':'flex1'" @click="switchType(2)">
                        推荐
                        <span class="line"></span>
                    </li>
                    <li v-bind:class="type == 3? 'flex1 on':'flex1'" @click="switchType(3)">
                        最近
                        <span class="line"></span>
                    </li>
                </ul>
                <div class="banner">
                    <div class="swiper-container" style="height:150px">
                        <div class="swiper-wrapper">
                            <div class="swiper-slide" v-for="item in banner">
                                <a :href="item.link">
                                    <img :src="item.cover_url" style="width:100%;" />
                                </a>
                            </div>
                        </div>
                        <!-- 如果需要分页器 -->
                        <div class="swiper-pagination"></div>
                    </div>
                </div>
                <nut-infiniteloading @loadmore="loadMore()" :has-more="dataList[query.type].hasMore"
                    :is-loading="loading" :is-showMod="true" unload-more-txt="没有更多了">
                    <div class="hotbox">
                        <ul>
                            <li v-for="(item, index) in dataList[query.type].rows">
                                <div class="hotbox-top">
                                    <img :src="item.img" class="product-img" @click="goPage(item.type,item.id)" />
                                    <div class="hotbox-label">
                                        <div class="spsc d-f a-c-c">
                                            <img src="img/index/shipin.png" class="spsc-icon" v-if="item.type == 1" />
                                            <span class="spsc-num" v-if="item.type == 1">{{item.duration}}</span>
                                        </div>
                                        <div class="sp-label">
                                            <button class="sp-label-btn" v-if="item.type == 1">视频</button>
                                            <button class="sp-label-btn zhuanlan" v-if="item.type == 2">专栏</button>
                                        </div>
                                    </div>
                                </div>
                                <p class="product-title">{{item.title}}</p>
                                <div class="product-leibie">
                                    <span>{{item.classify}}</span>
                                    <span>
                                        热度
                                        <span style="display:inline-block;margin-left:5px">{{item.hot}}</span>
                                    </span>
                                </div>
                            </li>
                        </ul>
                    </div>
                </nut-infiniteloading>
            </div>
        </div>

        <footbox active="shouye"></footbox>

        <!-- 弹框 -->
        <div class="likePop" v-if="settingVisible">
            <div class="pop-mask"></div>
            <div class="likeCont">
                <p class="likeCont-text">选我喜欢的科系</p>
                <div class="like-foot">
                    <button class="like-foot-btn" @click="cancelSetting">暂不设置</button>
                    <button class="like-foot-btn like-btn-ljsz" @click="settting">立即设置</button>
                </div>
            </div>
        </div>
    </div>
</body>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            settingVisible: false,
            loading: false,
            dataList: {
                index: { hasMore: true, rows: [] },
                hot: { hasMore: true, rows: [] },
                recent: { hasMore: true, rows: [] },
            },
            type: 1,  //1：热门 2：推荐 3：最近
            query: {
                page: 1,
                pageSize: 20,
                type: 'hot'
            },
            banner: [],
        },
        async created() {
            await this.getBanner();
            this.loadMore();
            this.getUserInfo();

            let distance = 10; //距离底部多少的时候 触发触底函数
            let exec = false
            window.onscroll = () => {
                if (document.body.scrollHeight < window.scrollY + window.innerHeight + distance) {
                    if (this.onReachBottom && !exec) {
                        this.onReachBottom()
                        //防抖处理
                        exec = true
                        setTimeout(() => {
                            exec = false
                        }, 1000)
                    }
                }
            }

            window.mySwiper = new Swiper('.swiper-container', {
                direction: 'horizontal', // 垂直切换选项
                loop: true, // 循环模式选项

                // 如果需要分页器
                pagination: {
                    el: '.swiper-pagination',
                },
            })
        },
        methods: {

            //推荐
            getData(url) {
                axios.get(url, { params: this.query }).then(res => {
                    let data = res.data;
                    axios.get('/mp/category/all').then(r => {
                        let classify = r.data;
                        let newData = [];
                        //重新组织数据，适合组件
                        for (let i = 0; i < data.length; i++) {
                            let url = "";
                            let duration = 0;
                            if (data[i]['type'] == 1) {
                                url = "/pages/video/index?id=" + data[i]['src_id']
                                duration = Math.floor(data[i]['data']['duration'] / 60) + ":" + parseInt(data[i]['data']['duration'] % 60)
                            } else if (data[i]['type'] == 2) {
                                url = "/pages/topic/index?id=" + data[i]['src_id']
                                duration = 0; //专栏没有播放时长
                            }
                            newData.push({
                                title: data[i]['data']['title'],
                                classify: classify[data[i]['category_id']]['name'],
                                hot: data[i]['data']['hot'],
                                img: data[i]['data']['cover_url'],
                                url: url,
                                type: data[i]['type'],
                                duration: duration,
                                id: data[i]['src_id']
                            })
                        }
                        this.dataList[this.query.type].rows.push(...newData);
                        this.dataList[this.query.type].hasMore = this.query.page <= 3 && newData.length === this.query.pageSize;
                    })
                })
            },
            // banner
            async getBanner() {
                await axios.get('/mp/index/banner').then(e => {
                    this.banner = e.data.list;
                });
            },
            loadMore() {
                if (this.dataList[this.query.type].hasMore) {
                    this.query.page++;
                    this.getData("/mp/index/" + this.query.type);
                }
            },
            //推荐
            getRecommend() {
                this.getData("/mp/index/index")
            },
            //热门
            getHot() {
                this.getData("/mp/index/hot")
            },
            //最近
            getRecent() {
                this.getData("/mp/index/recent")
            },
            getUserInfo() {
                axios.get("/mp/WechatUser/getUserInfo").then(res => {
                    sessionStorage.setItem("userInfo", res.data)
                    if (!res.data.category_selected) {
                        this.settingVisible = true
                    }
                })
            },
            cancelSetting() {
                this.settingVisible = false
            },
            settting() {
                window.location.href = "/kexishezhi.html"
            },
            switchType(type) {
                if (this.type !== type) {
                    this.type = type;
                    this.query.page = 0;
                    this.query.type = { '1': 'hot', '2': 'index', '3': 'recent' }[type];
                    this.loadMore();
                }
            },
            onReachBottom() {
                this.loadMore()
            },
            goSearch() {
                window.location.href = "/sousuo.html"
            },
            goPage(type, id) {
                if (type == 1) {
                    window.location.href = "/shipinxuexi.html?id=" + id
                } else if (type == 2) {
                    window.location.href = "/zhuantimulu.html?id=" + id
                }

            }
        }
    })

</script>

</html>